<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Sgvizler</title>
    <meta charset="UTF-8"/>
    <link rel="shortcut icon" href="http://sgvizler.googlecode.com/svn/www/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="http://sgvizler.googlecode.com/svn/www/sgvizler.css" />
    <link rel="stylesheet" type="text/css" href="sgvizler.example.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" id="sgvzlr_script" src="../sgvizler.js"></script>
    <script type="text/javascript" src="sgvizler.example.js"></script>
    <script type="text/javascript">
      sgvizler.namespaces['npd'] = 'http://sws.ifi.uio.no/npd/';
      sgvizler.namespaces['npdv']  = 'http://sws.ifi.uio.no/vocab/npd#';

      $(document).ready(function (){
        sgvizler.example.copyElementAsText('sgvzl_example_query', 'sgvzl_example_pre');
        sgvizler.example.copyQuery('sgvzl_example_query', 'sgvzl_example_table');
      });

      //// Leave this as is. Ready, steady, GO!
      $(document).ready(sgvizler.go());
    </script>
  </head>
  <body>
    <div id="logo">
      <a href="http://code.google.com/p/sgvizler/">
	<img src="http://sgvizler.googlecode.com/svn/www/mr.sgvizler.png" alt="mr.sgvizler.png"/>
      </a><br/>Mr. Sgvizler
    </div>

    <h3><code>gTimeline</code>: Production oil and gas per month at Ekofisk</h3>
    <div id="sgvzl_example_query"
 	 data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/npd"
	 data-sgvizler-query="PREFIX fn: &lt;http://www.w3.org/2005/xpath-functions#&gt;
			      SELECT xsd:date(?date) ?Oil_millSm &quot;&quot; &quot;&quot; ?Gas_billSm &quot;&quot; &quot;&quot;
			      WHERE{ 
			        {[] a npdv:FieldProductionPeriod ;
			        npdv:hasField &lt;http://sws.ifi.uio.no/npd/field/Ekofisk&gt; ;
			        npdv:month ?month ;
			        npdv:year ?year ;
			        npdv:producedNetOilMillSm3 ?Oil_millSm ;
			        npdv:producedNetGasBillSm3 ?Gas_billSm ;
			        LET (?date := fn:concat(fn:concat(fn:concat(?year, &quot;-&quot;), ?month), &quot;-01&quot;))
			        FILTER (xsd:int(?year) &lt; 2011 && xsd:int(?month) &gt; 9)}
			      UNION
			        { [] a npdv:FieldProductionPeriod ;
			        npdv:hasField &lt;http://sws.ifi.uio.no/npd/field/Ekofisk&gt; ;
			        npdv:month ?month ;
			        npdv:year ?year ;
			        npdv:producedNetOilMillSm3 ?Oil_millSm ;
			        npdv:producedNetGasBillSm3 ?Gas_billSm ;
			        LET (?date := fn:concat(fn:concat(fn:concat(?year, &quot;-0&quot;), ?month), &quot;-01&quot;))
			        FILTER (xsd:int(?year) &lt; 2011 && xsd:int(?month) &lt; 10)
			      } }ORDER BY xsd:date(?date)"
	 data-sgvizler-chart="gTimeline"
	 data-sgvizler-loglevel="2"
	 style="width:800px; height:400px;"
	 ></div>

    <h3>Copy of the &lt;div&gt; element which draws the above chart</h3>
    <pre id="sgvzl_example_pre"></pre>

    <h3>The results of the query in <code>gTable</code></h3>
    <div id="sgvzl_example_table"
	 data-sgvizler-chart="gTable"
	 data-sgvizler-loglevel="2"
    ></div>

    <div id="footer">
      <!-- Please leave a link to the Sgvizler homepage --> 
      <p>
	Sgvizler visualizes the result of SPARQL SELECT queries using
	javascript and the Google Visualization API. For more
	information, see
	the <a href="http://code.google.com/p/sgvizler/">Sgvizler</a>
	homepage. (c)
	2011 <a href="http://folk.uio.no/martige/">Martin
	G. Skj&#230;veland</a>.
      </p>
    </div>
  </body>
</html>
